﻿<script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.signalR.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/signalr/hubs")"></script>


<div id='container'>
    <div id='chat'>
        <b>Chatroom:</b>
        <br /><br />
        <input type="text" id="message" maxlength="100" />
        <input type="button" id="broadcast" value="Broadcast" />
        <input type="button" id="clear" value="Clear" />
        <br /><br />
        <ul id="chatdialog"></ul>        
    </div>   
</div>


<script type="text/javascript">

    $(function () 
    {
        // Create the connection to our SignalR Chat Hub.
        var signalRChatHub = $.connection.chatHub;

        // Define some Javascript methods the server-side Hub can invoke.        

        // Add chat messages from server to dialog.
        signalRChatHub.addChatMessage = function (message) 
        {
            $('#chatdialog').append('<li>' + message + '</li>');
        };

        // Click event-handler for broadcasting chat messages.
        $('#broadcast').click(function () 
        {
            // Call Server method.
            signalRChatHub.pushMessageToClients($('#message').val());

            $('#message').val("");
        });

        // Start the SignalR Hub.
        $.connection.hub.start(function () 
        {
            // Do stuff here, if needed.         
        });

        // Click event-handler for clearing chat messages.
        $('#clear').click(function () 
        {
            $('ul li').remove();
        });
    });
	
</script>



